<template>
<div>
   <router-link 
     tag="div" to="/" 
     class="header-abs"
     v-show="showAbs"> 
       <div class="iconfont header-abs-back">&#xe624;</div>
   </router-link>
   <div class="header-fixed"
        v-show="!showAbs"
        :style="opacityStyle">
       <router-link  to="/"> 
       <div class="iconfont header-fixed-back">&#xe624;</div>
       </router-link>
       景点详情
   </div>
</div>
</template>
<script>
import DetailHeader from 'common/gallary/Gallary'
export default {
    name:'DetailHeader',
    data(){
      return{
          showAbs:true,
          opacityStyle:{
              opacity:0
          }
      }
    },
    methods:{
   handleScroll () {
    const top=document.documentElement.scrollTop//滚动的距离
    if(top > 60){
        let opacity = top /140
        opacity =opacity> 1 ? 1 : opacity//当top大于140时opacity永远都为1
        this.opacityStyle={
            opacity//当键值都相等时可yi缩写
        }
     this.showAbs=false
    }else{
        this.showAbs=true
    }
   }
    },
    activated () {//因为用了keep-alive，所以页面已被展示，该钩子就被执行
     window.addEventListener('scroll',this.handleScroll)//当执行滚动，则触发handleScroll事件
    },
    deactivated () {//因为用了keep-alive，所以页面在即将被隐藏或者说页面即将被替换成新的页面时，该钩子就被执行
       window.removeEventListener('scroll',this.handleScroll) 
       //在页面被隐藏时，对handleScroll这个全局事件进行解绑（在不进行解绑的情况下，切换到其他页面，该全局事件也会被执行，因此大大影响性能）
    }
   
}
</script>
<style lang="stylus" scoped>
@import '~styles/variable.styl'
.header-abs
  position absolute
  left .2rem
  top .2rem
  width .8rem
  height .8rem
  border-radius .4rem
  text-align center
  line-height .8rem
  background rgba(0,0,0,.8)
  .header-abs-back
      color #fff
      font-size .4rem 
.header-fixed 
    height: 0.86rem
    line-height: $headerHeight
    text-align: center
    color: #fff
    z-index 2
    background: $bgcolor
    font-size: 0.32rem
    position fixed
    top 0
    left 0
    right 0

    .header-fixed-back
      position: absolute
      top:0
      left :0
      width: .64rem
      text-align: center
      font-size: .4rem
      color :#fff
</style>
